<template>
  <form-box headText="头信息">
    <el-form-item label="核算单号" label-width="68px">
      <el-input v-model="reqData.compute_info.compute_no" :disabled="true"></el-input>
    </el-form-item>

    <el-form-item label="核算日期" label-width="68px">
      <el-input v-model="reqData.compute_info.compute_date"></el-input>
      <el-date-picker
        v-model="reqData.compute_info.compute_date"
        align="right"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions">
      </el-date-picker>
    </el-form-item>

    <el-form-item label="客户名称" label-width="78px" required>
      <el-select
        :disabled="!isEdit_g"
        v-model="reqData.compute_info.cst_company_name"
        name="companyId"
        clearable
        filterable
        remote
        :remote-method="remoteMethod_cstName"
        :loading="cstNameSearchLoading"
        @change="selectCstNameChange"
        placeholder="客户名称">
      <el-option
        v-for="item in options_search_headCstName"
        :key="item.cst_company_id"
        :label="item.cst_name"
        :value="item.cst_company_id">
      </el-option>
    </el-select>
    </el-form-item>

    <el-form-item label="制品材料" label-width="68px">
      <el-input :disabled="!isEdit_g" v-model="reqData.compute_info.material"></el-input>
    </el-form-item>
  </form-box>
</template>
<script>
  import formBox from '../../../../components/formBox.vue'
  import { dictCstCompanyList } from '@/api/cstOrder/quote'

  export default {
    name:'createComputeHead',
    components:{
      formBox
    },
    data(){
      return {
        cstNameSearchLoading:false,
        searchReqData:{
          client_type:1,
          cst_sup_type:1,//1:company 2:user
          curr_page:1,
          page_size:10
        },
        serachHeadCstNameReqData:{
          client_type:1,
          company_id:'',
          cst_name:''
        },
        options_search_headCstName:[],
      }
    },
    props:[
      'reqData',
      'isEdit_g'
    ],
    methods:{
      remoteMethod_cstName(query){  //定单头信息 公司客户搜索 方法
        this.cstNameSearchLoading = true;
        this.serachHeadCstNameReqData.cst_name = query
        dictCstCompanyList(this.serachHeadCstNameReqData)
          .then(res => {
            setTimeout(() => {
              this.cstNameSearchLoading = false;
              this.options_search_headCstName = res.cst_list
            }, 1000 * Math.random());
          })
          .catch(err => {
            this.$message.error('查询失败!');
            console.log(err);
          })
      },
      selectCstNameChange(val){ //头信息-公司客户 搜索选框的change事件方法
        if(val !== ''){
          for(let i of this.options_search_headCstName){
            if(i.cst_company_id == val){
              this.reqData.compute_info.cst_company_name = i.cst_name
              this.reqData.compute_info.cst_company_id = i.cst_company_id
            }
          }
        }

      },
    }
  }
</script>
<style scoped lang="scss">

</style>
